<template>
	<view>
		<topbar :backgroundColor="backgroundColor" :navButtonColor="navButtonColor"></topbar>

		<uni-forms style="margin: 50rpx 50rpx;">
			<uni-forms-item>
				<uni-data-picker :localdata="databaseType" v-model="databaseData.type">

				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="text" v-model="databaseData.name" placeholder="连接名" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="text" v-model="databaseData.ip" placeholder="数据库地址" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="text" v-model="databaseData.port" placeholder="端口号" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="text" v-model="databaseData.account" placeholder="用户名" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="password" v-model="databaseData.password" placeholder="密码" />
			</uni-forms-item>
		</uni-forms>

		<view style="width: 400rpx; margin: 0rpx auto;display: flex;flex-direction: row;">
			<u-button style="margin-right: 10rpx;" @click="doTestConnection()">测试链接</u-button>
			<u-button style="margin-left: 10rpx;" @click="doAddConnection()">确定</u-button>
		</view>
	</view>
</template>

<script>
	import {
		addConnection,
		testConnection
	} from '@/api/database/index.js'

	export default {
		name: "addconnection",
		data() {
			return {
				databaseType: [{
					text: 'mysql',
					value: 0,
				}],
				databaseData: {
					ip: '',
					port: '',
					name: '',
					account: '',
					password: '',
					type: 0
				},
				backgroundColor: '',
				navButtonColor: ''
			}
		},
		onReady() {
			this.backgroundColor = uni.getStorageSync('backgroundColor')
			this.navButtonColor = uni.getStorageSync('navButtonColor')
		},
		methods: {
			doTestConnection() {
				testConnection({
					type: this.databaseData.type,
					ip: this.databaseData.ip,
					port: this.databaseData.port,
					account: this.databaseData.account,
					password: this.databaseData.password
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '连接成功',
							duration: 2000
						})
					}
				})
			},
			doAddConnection() {
				addConnection({
					type: this.databaseData.type,
					name: this.databaseData.name,
					ip: this.databaseData.ip,
					port: this.databaseData.port,
					account: this.databaseData.account,
					password: this.databaseData.password
				}).then(res => {
					uni.showToast({
						title: '增加成功',
						icon: 'success'
					})

					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			},
			handleChange(e) {
				this.type = e;
			}
		}
	}
</script>

<style>
	.item {
		width: 100px;
		border: 1px solid #555555;
		border-radius: 5px;
		margin: 10px;
	}
</style>
